الميزات الجديدة في الويب

Rachel Andrew

تاريخ النشر: 20 أيار (مايو) 2025

في مؤتمر Google I/O لعام 2025، تم الإعلان عن كل الميزات الجديدة في الويب، بالإضافة إلى بعض الميزات التي أصبحت جزءًا من Baseline هذا العام. لقد كان هذا العام رائعًا بالنسبة إلى الويب وإلى Baseline، وتقدّم هذه المشاركة ملخّصًا لكل ما تم ذكره، مع جميع الروابط لمعرفة المزيد.

لوحة بيانات Web Platform وميزات الويب

في عام 2024، أعلنّا عن الإطلاق الأولي لوحة بيانات منصّة الويب التي تستخدِم مجموعة بيانات ميزات الويب، مما يتيح لك استكشاف جميع الميزات التي تشكّل جزءًا من Baseline.

أصبحت بيانات ميزات الويب مكتملة الآن، وتمّ ربط جميع ميزات المنصة. عندما تُضاف ميزات جديدة إلى "مقياس الأداء الأساسي" كل شهر، يتم تعديل البيانات، ويتم عرض كل ذلك في لوحة البيانات.

أدوات لمساعدتك في اكتشاف استهدافك الأساسي

على الرغم من أنّه يمكنك استناد سياسة توافق المتصفّح إلى الاستهداف المتغيّر لقاعدة أساسية متاحة على نطاق واسع، مثل وكالة Clearleft في المملكة المتحدة، يمكنك أيضًا اعتماد استهداف ثابت استنادًا إلى عام قاعدة أساسية. يمكنك الآن استخدام بيانات المستخدمين الخاصة بك، بالإضافة إلى بيانات ميزات الويب لتحديد أفضل استهداف لك.

في العام الماضي، أعلنّا في مؤتمر I/O أنّ شركة RUMvision ستُطبّق Baseline في منتجاتها، وقد اكتمل هذا الدمج الآن.

وبما أنّه يستخدِم بيانات RUM، يساعدك في تحديد السنة الأساسية التي يجب اعتمادها استنادًا إلى تلك البيانات بدلاً من المتوسط العام. ويمكن أن يساعدك أيضًا في معرفة ما إذا كان استخدام ميزة "البيانات الأساسية المتوفّرة على نطاق واسع" مناسبًا لك.

يمكنك أيضًا استخدام بيانات "إحصاءات Google" لمعرفة النسبة المئوية بوضوح للمستخدمين الذين يتوفّر لديهم كلّ هدف أساسي باستخدام أداة أداة التحقّق من قاعدة بيانات "إحصاءات Google" الجديدة.

هذه اثنتان فقط من مجموعة متنامية من الأدوات التي تساعدك في ربط بيانات المستخدمين الفعليين بـ "القاعدة الأساسية".

أطلقت مجموعة Web DX Community مؤخرًا إضافة لخدمة Netlify تتيح استخدام قياسات لعامّات أساسية مختلفة، وهي متاحة على نطاق واسع على مواقعك الإلكترونية لمساعدتك في تحديد ما يجب استهدافه في أدوات الإنشاء. ستتوفّر قريبًا عمليات الدمج مع منتج Observatory RUM من Cloudflare وContentsquare.

دمج البيانات مع أدواتك الخاصة

بيانات ميزات الويب مفتوحة ومتاحة لعملية الدمج الخاصة بك. ونحن نحاول تسهيل ذلك.

استخدِم Web Platform Dashboard API أو استخدِم بيانات ميزات الويب مباشرةً من حزمة npm.

يمكنك الآن ربط إصدارات المتصفّح بهدف أساسي باستخدام وحدة baseline-browser-mapping من مجموعة W3C WebDX Community. يمكن استخدام هذه الوحدة في بيئة JavaScript من جهة الخادم، أو من خلال تنزيل ملفات JSON أو CSV التي تتم تحديثها يوميًا من المستودع.

لا تتضمّن هذه البيانات عمليات الربط لمجموعة متصفّحات Baseline الأساسية فحسب، بل تشمل أيضًا المتصفّحات المتوافقة مثل Samsung Internet وOpera وUC Browser وAndroid Webview.

معرفة ما إذا كانت الميزات متوافقة مع استهداف "الأداء الأساسي"

تتوفّر المعلومات الأساسية الآن في معظم صفحات MDN وCan I Use، ويمكن أيضًا العثور عليها في لوحة بيانات Web Platform، وفي المقالات على web.dev وCSS Tricks. ومع ذلك، يتطلّب كل ذلك البحث عن الدعم. سيكون من المفيد جدًا عرض معلومات Baseline في بيئة تطوير البرامج أثناء كتابة الرموز البرمجية، وكجزءٍ من جميع الأدوات الأخرى التي تستخدمها.

يسرّنا إعلامك بأنّ العديد من الأدوات الرئيسية تتضمّن الآن ميزة Baseline مضمّنة أو مدمجة بسهولة.

browserslist-config-baseline

تستخدم العديد من الأدوات، مثل Babel وPostCSS، قائمة browserslist لتحديد المتصفّحات التي يجب توافقها.

بالتعاون مع فريق WebDX CG وأعضاء المنتدى، ساعد فريق Chrome في طرح أداة جديدة تُسمى browserslist-config-baseline. يتيح لك ذلك ضبط استهدافات قائمة المتصفّحات بمصطلحات "المستوى الأساسي"، مثل "متاح على نطاق واسع" أو "سنوات المستوى الأساسي".

وبفضل ذلك، يمكن الآن التعبير عن أي أداة تستخدِم استهدافًا في Browserslist بالاستناد إلى قاعدة Baseline.

اطّلِع على مزيد من المعلومات في مقالة استخدام Baseline مع browserslist.

قاعدة بيانات في برامج التدقيق اللغوي: ESLint وStylelint

أصبح استخدام Baseline مع أدوات التدقيق ممكنًا مؤخرًا من خلال بعض الأدوات الجديدة في مجال أدوات التدقيق، بدءًا من ESLint لصفحات CSS.

يحتوي ESLint الأساسي على قاعدة use-baseline. يمكنك ضبط هذا الخيار على القيمة المفضّلة لاستهداف "القاعدة الأساسية"، وسيحذّرك عند استخدام أي ميزات أحدث من استهدافك. يمكنك اختيار كيفية حلّ هذه التحذيرات: إمّا عن طريق استبدال هذه الميزة بعناصر أساسية أو عن طريق إيقاف تحذير أداة التدقيق اللغوي، وهو حلّ صالح تمامًا عندما تكون متأكدًا من استخدامك ميزة حديثة بأمان، على سبيل المثال إذا كانت ميزة تحسين تدريجي.

لن يُرسل ESLint تحذيرًا تلقائيًا في حال استخدام ميزات أحدث ضمن @supports الكتل، لأنّ المتصفّحات غير المتوافقة لن تقيّمها على أي حال.

لتلبية احتياجاتك المتعلّقة بفحص أخطاء HTML، تتوفّر أيضًا إضافة من إنشاء المنتدى تُسمى html-eslint.

يتيح Stylelint رسميًا استخدام مكوّن إضافي يُسمى stylelint-plugin-use-baseline. تعمل هذه القاعدة تمامًا مثل قاعدة ESLint لتنسيق CSS، ولكنّها تعمل على Stylelint بدلاً من ذلك.

تتضمّن العديد من أدوات فحص الأخطاء أيضًا مكوّنات إضافية لبيئة تطوير البرامج المتكاملة، ما يتيح لك الحصول على ملاحظات فورية بشأن حالة قاعدة البيانات أثناء الترميز من خلال الخطوط السفلية المتعرجة.

Baseline في VS Code وJetBrains WebStorm

منذ فترة طويلة، تتيح العديد من حِزم تطوير البرامج (IDE) تمرير مؤشر الماوس فوق إحدى الميزات في المحرِّر والاطّلاع على قائمة إصدارات المتصفّح المتوافقة.

ولكن قد يكون من الصعب جدًا معرفة ما إذا كانت هذه الميزة آمنة للاستخدام، عليك تحليل ما إذا كانت هناك أي متصفّحات رئيسية غير مضمّنة في هذه القائمة ومدى حداثة إصدار المتصفّح.

لحلّ هذه المشكلة، عقدنا شراكة مع VS Code، وهو بيئة تطوير البرامج الأكثر رواجًا التي يستخدمها ملايين مطوّري الويب، لدمج بيانات Baseline مباشرةً في هذه البطاقات المنبثقة.

يمكنك الآن تمرير مؤشر الماوس فوق إحدى الميزات وسيخبرك ذلك فقط ما إذا كانت الميزة تُعتبر أساسية ومدة ذلك، أو ما إذا كانت هناك أي متصفّحات رئيسية لم تنفّذها بالكامل بعد.

تشمل الميزات المتوافقة سمات CSS وعناصر HTML وسمات HTML. يمكنك الاطّلاع على مزيد من المعلومات في مقالة Visual Studio Code يتيح الآن استخدام Baseline.

ويعني هذا الدمج أنّ أيّ بيئات تطوير برامج برمجية مستندة إلى VS Code ستستفيد أيضًا من هذه البطاقات المنبثقة.

يسرّنا أيضًا الإعلان عن أنّ JetBrains بصدد تنفيذ بطاقات التمرير في IDE لـ WebStorm JavaScript وTypeScript.

تحسين الويب بشكل أسرع من أي وقت مضى

نأمل أن يساعدك Baseline في الاستفادة من حقيقة أنّ الويب المتوافق مع معايير الويب قيد التحسين بشكل أسرع من أي وقت مضى.

يمكنك استخدام "لوحة بيانات النظام الأساسي على الويب" للاطّلاع على جميع الميزات التي أصبحت متوفّرة حديثًا في "المستوى الأساسي" خلال الاثنتي عشرة شهرًا الماضية، أي منذ مؤتمر Google I/O لعام 2024.

هناك أيضًا عدد من الميزات التي يمكنك التأكّد من أنّها ستكون متاحة قريبًا في Baseline، وذلك لأنّها مضمّنة في مشروع Interop 2025. يمكنك قراءة مقالة Interop2025: عام آخر من التحسينات على منصات الويب للاطّلاع على جميع الميزات المضمّنة.

أوضاع الكتابة باتجاه جانبي

لقد سبق أن أصبحت إحدى الميزات متوفّرة في "المستوى الأساسي"، وهما قيم sideways-rl وsideways-lr للسمة writing-mode في CSS. إذا كنت تستخدم وضع الكتابة العمودي لأغراض التنسيق فقط، من المرجّح أن تكون قيم الحجم المتعلّقة بالعرض هي القيم التي تريد استخدامها.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

موضع الربط

موضع الربط تم طرحه في الإصدار 125 من Chrome. تمنحك هذه السمة طريقة لربط موضع عنصر بأحد علامات الربط، على سبيل المثال عند فتح تلميح باستخدام زر.

تم تضمين هذا الإصدار الآن في Interop 2025، لذا من المفترض أن يصبح متاحًا في Baseline هذا العام.

مؤشرات أداء الويب الأساسية: سرعة عرض أكبر محتوى مرئي (LCP) ومدى استجابة الصفحة لتفاعلات المستخدم (INP)

LCP API

Event Timing API (for INP)

يمكن أن تساعدك مؤشرات أداء الويب في قياس تجربة موقعك الإلكتروني وتحديد فرص التحسين. تهدف مبادرة Web Vitals إلى تبسيط المشهد، ومساعدة المواقع الإلكترونية على التركيز على المقاييس الأكثر أهمية، وهي "مؤشرات أداء الويب الأساسية".

يتضمّن Interop 2025 مقياسَي سرعة عرض أكبر محتوى مرئي (LCP) ومدى استجابة الصفحة لتفاعلات المستخدم (INP) من خلال تنفيذ واجهتَي برمجة التطبيقات LargestContentfulPaint API وEvent Timing API على جميع المتصفّحات.

تحسينات على عنصر <details>

العنصر <details> نفسه متوفّر على نطاق واسع في الإصدار الأساسي. تم تضمين هذا الإصدار في Interop 2025 لأنّ هناك عددًا من الميزات التي تجعل التطبيقات المصغّرة لبيان الإفصاح التي تستخدم <details> أكثر فائدة.

يحتوي عنصر <details> على عنصر <summary> الذي يمثّل الجزء المرئي على الصفحة عند تصغير عنصر <details>. خارج العنصر <summary>، يظهر محتوى العنصر <details>، وهو مخفي إلى أن يقرِّر المستخدِم النقر على الملخّص.

من بين الإجراءات التي يتم إتاحة إمكانية التشغيل التفاعلي لها خلال Interop 2025 هو إخفاء المحتوى باستخدام content-visibility بدلاً من display، ما يعني أنّه لن يتم عرض المحتوى على الإطلاق في حال عدم توسيعه.

يُعدّ العنصر النائب ::marker جزءًا من عمل Interop 2025 أيضًا. يتيح لك العنصر الاصطناعي ::marker تصميم المثلث الذي يشير إلى الإفصاح في العنصر<summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

بعد ذلك، عنصر زائف آخر: ::details-content.

يمثّل الرمز ::details-content المحتوى، وهو الجزء من عنصر التفاصيل الذي يتم توسيعه وتصغيره ويتيح لك تصميمه.

[open]::details-content {
  border: 5px dashed hotpink;
}

هناك أيضًا بعض التحسينات الرائعة، مثل توسيع عنصر <details> تلقائيًا باستخدام المطابقات التي يتم العثور عليها في الصفحة، وضبط قيمة until-found لسمة hidden في HTML على "السعر الأساسي: متوفّر حديثًا". يؤدي ذلك إلى إخفاء عنصر إلى أن يتم العثور عليه باستخدام ميزة "البحث في الصفحة" في المتصفّح أو الانتقال إليه مباشرةً من خلال اتّباع جزء من عنوان URL.

CSS @scope

تتيح لك قاعدة @scope في CSS الحدّ من مدى وصول أدوات الاختيار. من خلال ضبط جذر نطاق باستخدام @scope، لا تنطبق أي قواعد نمط مُدمجة داخل قاعدة at-rule إلا على شجرة DOM هذه.

على سبيل المثال، إذا كنت تريد استهداف عناصر <img> فقط داخل عنصر يملك فئة .card، سيصبح .card جذر النطاق.

@scope (.card) {
    img {
        border-color: green;
    }
}

اطّلِع على مزيد من المعلومات في مقالة حصر مدى وصول أدوات الاختيار باستخدام قاعدة CSS @scope.

scrollend

إنّ ميزة scrollend هي ميزة أخرى تقلّل من التعقيد وتُحسِّن واجهات التمرير. بدون حدث scrollend، لا تتوفّر طريقة موثوقة لرصد اكتمال عملية التمرير.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

باستخدام الحدث scrollend، يُجري المتصفّح كل هذا التقييم الصعب بدلاً منك.

document.onscrollend = event => {…}

يمكنك الاطّلاع على المزيد من الأمثلة في مقالة Scrollend، حدث JavaScript جديد.

عمليات النقل في عرض المستند نفسه

أخيرًا وليس آخرًا، إنّ انتقالات العرض هي جزء من Interop 2025. يشمل العمل عمليات انتقال عرض المستند نفسه، لذا فإنّه يشمل أيضًا فئات عمليات انتقال عرض التطبيقات المكوّنة من صفحة واحدة.

يمكنك متابعة آخر الأخبار من خلال لوحة بيانات Interop 2025 لاطلاعك على مستوى تقدّم المشروع مع تقدّم العام.

لن تكون الميزات المضمّنة في Interop 2025 هي الميزات الوحيدة التي ستصبح جزءًا من الإصدار الأساسي هذا العام، ولكنّ تضمينها في المشاريع يشير إلى أنّنا نعطي الأولوية لهذه الميزات وأنّها ستتوفّر قريبًا.

هذه مجرد البداية

لقد كان عامًا رائعًا لخدمة Baseline، وقد قطعنا شوطًا طويلاً منذ الإعلانات التي أطلقناها العام الماضي. لقد اكتملت الآن عملية إضافة بيانات سابقة لميزة الويب. وقد سمح ذلك بإنشاء أدوات للمطوّرين. نحن في مرحلة البدء فقط، وإذا كان لديك منتج أو أداة مفتوحة المصدر يمكن أن تستفيد من تضمين هذه البيانات، يسرّنا التواصل معك.

يمكنك متابعة web.dev حيث سنواصل نشر إعلانات عن الأدوات الجديدة بالإضافة إلى أدلة تعليمية لمساعدتك في الاستفادة من كل ما تقدّمه الويب.